<template>
	<view class="main_box">
		<h4>(邯郸)全屋定制安装报价单</h4>
		<div class="container">
			<div class="title">安装厂家</div>
			<div class="content">{{form.companyName}}</div>
		</div>
		<div class="container">
			<div class="title">安装日期</div>
			<div class="content">{{ $format(form.installDate, "yyyy-MM-dd") }}</div>
		</div>
		<div class="container">
			<div class="title">安装地址</div>
			<div class="content">{{form.address}}</div>
		</div>
		<table class="hcp_table">
			<tr class="d-flex">
				<th class="flex-4">柜体名称</th>
				<th class="flex-5">柜体尺寸(m²)</th>
				<th class="flex-6">总价(元)</th>
			</tr>
			<tr v-for="(item,index) in form.cabinets" :key="index" class="d-flex">
				<td class="flex-4">{{item.name}}</td>
				<td class="flex-5">{{item.area?`${item.num1}×${item.num2}=${item.area}`:''}}</td>
				<td class="flex-6">{{(item.unitPrice&&item.area)?`${item.unitPrice}×${item.area}=${item.totalPrice}`:''}}</td>
			</tr>
		</table>
		<div class="container">
			<div class="title">附加费用</div>
			<div class="content">{{form.additionalCost?`${form.additionalCost}元`:''}}</div>
		</div>
		<div class="container">
			<div class="title">安装总价</div>
			<div class="content">{{form.installTotalPrice?`${form.installTotalPrice}元`:''}}</div>
		</div>
		<div class="container">
			<div class="title">备注</div>
			<div class="content">{{form.remark?`${form.remark}`:''}}</div>
		</div>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			if (options.id) {
				console.log(options.id, 'options.id')
				this.id = options.id
				this.getItemInfo()
			}
		},
		data() {
			return {
				id: '',
				form: {},
			}
		},
		methods: {
			getItemInfo() {
				this.$api
					.queryInstallItem({ id: this.id })
					.then(res => {
						if (res.code == 200) {
							this.form = res.data || {}
							console.log(this.form.cabinets, 'form.cabinets')
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none',
							})
						}
					})
			}
		},
	}
</script>

<style>
	.main_box {
		min-height: 100vh;
		padding: 10rpx;
		background: #9cd4e1;
	}

	.hcp_table {
		margin-top: 60rpx;
		margin-bottom: 40rpx;
		border-spacing: 0;
		text-align: left;
		border-top: 1rpx solid #e8e8e8;
		border-left: 1rpx solid #e8e8e8;
	}

	.hcp_table th {
		padding: 20rpx;
		background: #9cd4e1;
		color: #ffffff;
		border-right: 1rpx solid #ffffff;
		border-bottom: 1rpx solid #ffffff;
	}

	.hcp_table td {
		padding: 20rpx;
		background: #ffffff;
		color: #333333;
		font-size: 27rpx;
		border-right: 1px solid #333333;
		border-bottom: 1px solid #333333;
	}

	td {
		word-wrap: break-word;
		word-break: break-all;
	}

	h4 {
		text-align: center;
		padding: 15rpx 0;
		margin-bottom: 30rpx;
		font-size: 36rpx;
		color: #ffffff;
	}

	.container {
		display: flex;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.title {
		flex: 1;
		padding: 15rpx 0;
		color: #ffffff;
		font-weight: 700;
		border: 1rpx solid #ffffff;
	}

	.content {
		flex: 3;
		padding: 15rpx 0;
		color: #333333;
		background-color: #ffffff;
	}

	.flex-4 {
		flex: 4;
	}

	.flex-5 {
		flex: 5;
	}

	.flex-6 {
		flex: 6;
	}
</style>